<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ name: 'welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加商品</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-alert title="添加商品信息" type="info" :closable="false" show-icon>
      </el-alert>
      <el-steps
        :space="200"
        :active="activeIndex - 0"
        finish-status="success"
        align-center
      >
        <el-step
          :title="item"
          v-for="(item, index) in stepTitle"
          :key="index"
        ></el-step>
      </el-steps>

      <el-tabs
        v-model="activeIndex"
        tab-position="left"
        :before-leave="handlerBeforeToggle"
      >
        <el-tab-pane
          :label="item"
          :name="index + ''"
          v-for="(item, index) in tabsTitle"
          :key="index"
        ></el-tab-pane>
        <keep-alive>
          <component :is="comName[activeIndex - 0]"></component>
        </keep-alive>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import BasicInfo from './add-goods/BasicInfo.vue'
import GoodsAttr from './add-goods/GoodsAttr.vue'
import GoodsParams from './add-goods/GoodsParams.vue'
import GoodsImg from './add-goods/GoodsImg.vue'
import GoodsContent from './add-goods/GoodsContent.vue'
export default {
  name: 'AddGoods',
  provide() {
    return {
      addGoodsForm: this.addGoodsForm
    }
  },
  data() {
    return {
      activeIndex: '0',
      addGoodsForm: {
        goods_name: '',
        goods_price: '',
        goods_weight: 0,
        goods_number: '',
        goods_cat: [],
        goods_introduce: '',
        pics: [],
        attrs: []
      },
      comName: [
        'BasicInfo',
        'GoodsParams',
        'GoodsAttr',
        'GoodsImg',
        'GoodsContent'
      ],
      stepTitle: [
        '基本信息',
        '商品参数',
        '商品属性',
        '商品图片',
        '商品内容',
        '完成'
      ],
      tabsTitle: [
        '基本信息',
        '商品参数(动态)',
        '商品属性(静态)',
        '商品图片',
        '商品内容'
      ]
    }
  },
  components: {
    BasicInfo,
    GoodsParams,
    GoodsAttr,
    GoodsImg,
    GoodsContent
  },
  methods: {
    // 在tab标签切换前的处理
    handlerBeforeToggle() {
      if (this.addGoodsForm.goods_cat.length !== 3) {
        this.$message.error('商品分类是必填项')
        return false
      }
    }
  }
}
</script>

<style scoped lang="less"></style>
